<template>
  <el-table
    v-loading="listLoading"
    :data="list"
    fit
    size="mini"
    class="no-border-table branches-table"
    :max-height="maxHeight"
    style="width: 100%"
    @cell-mouse-enter="mouseEnter"
    @cell-mouse-leave="mouseLeave"
  >
    <el-table-column
      align="right"
      label="序号"
      type="index"
    >
    </el-table-column>

    <el-table-column
      align="left"
      label="分行名称"
    >
      <template slot-scope="{row}">
        <span>{{ row.name }}</span>
      </template>
    </el-table-column>

    <el-table-column
      align="right"
      label="问题数量"
      width="80px"
    >
      <template slot-scope="{row}">
        <span>{{ row.value }}</span>
      </template>
    </el-table-column>

  </el-table>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { RankedBranch } from '@/api-scp/types'

@Component({
  name: 'BranchIssuesTable'
})
export default class extends Vue {
  @Prop({ default: '300px' }) private maxHeight!: string
  @Prop({ required: true }) private list!: RankedBranch[]

  private listLoading = true

  @Watch('list', { deep: true })
  private onListDataChange(value: RankedBranch[]) {
    this.listLoading = false
  }

  mouseEnter(row, column, cell, event) {
    this.$emit('highlight', row.region)
  }

  mouseLeave(row, column, cell, event) {
    this.$emit('cancel-highlight', row.region)
  }
}
</script>

<style lang="scss" scoped>
</style>
